<template>
  <div id='topnav'>
    <div class="main">
<h2>ToDoList</h2>
<input type="text" placeholder="添加ToDo" v-model="value" @keyup.enter="add">
</div>
 </div>
</template>

<script>
export default {
components: {
//定义 组件
  },
  data() { 
//接受数据      
    return {
    value:''
}
  },
mounted() {
//挂载后 进入页面加载
  },    
  created() {

  },
  methods:{
//方法 函数
add(){
    if(this.value == ''){
        alert('不能为空')
        return
    }else{
      this.$store.commit('add',this.value)
        this.value =''
    }
}
  },
filters: {
//过滤，筛选
},
computed: {
//计算
},
//监听
watch: {
//被监听者名称
route: {
//是否一进入页面就开始监听
 immediate: false, 
//执行函数
handler(newVal, oldVal) {},
//是否深度监听
deep: false,
},
},
 }
</script>

<style scoped lang='scss'>
#topnav{
    width: 100%;
    height: 60px;
    background-color: black;
    color: white;
   .main{
       width: 600px;
       height: 100%;
       margin: auto;
    //    background-color: yellowgreen;
       display: flex;
       align-items: center;
       justify-content: space-between;
       input{
           width: 400px;
           height: 30px;
           border-radius: 10px;
       }
   }
}
</style>